<<<<<<< HEAD
import React from "react";
import StoPaginator from "../components/StoPaginator/StoPaginator";

export default function PaginatorDemo() {
=======
import { useRef } from "react";
import StoTable from "../components/StoTable";
import StoPaginator from "../components/StoPaginator";

const _students = [
  {
    id: 1,
    name: "张无忌",
    avatar: "/vite.svg",
    age: 20,
    gender: "男",
    score: 85,
  },
  {
    id: 2,
    name: "黄蓉",
    avatar: "/vite.svg",
    age: 22,
    gender: "女",
    score: 92,
  },
  {
    id: 3,
    name: "令狐冲",
    avatar: "/vite.svg",
    age: 19,
    gender: "男",
    score: 78,
  },
  {
    id: 4,
    name: "杨过",
    avatar: "/vite.svg",
    age: 21,
    gender: "男",
    score: 88,
  },
  {
    id: 5,
    name: "小龙女",
    avatar: "/vite.svg",
    age: 23,
    gender: "女",
    score: 95,
  },
  {
    id: 6,
    name: "任盈盈",
    avatar: "/vite.svg",
    age: 20,
    gender: "男",
    score: 81,
  },
  {
    id: 7,
    name: "岳灵珊",
    avatar: "/vite.svg",
    age: 18,
    gender: "女",
    score: 73,
  },
  {
    id: 8,
    name: "陆小凤",
    avatar: "/vite.svg",
    age: 24,
    gender: "男",
    score: 90,
  },
  {
    id: 9,
    name: "赵敏",
    avatar: "/vite.svg",
    age: 22,
    gender: "女",
    score: 87,
  },
  {
    id: 10,
    name: "倚天剑",
    avatar: "/vite.svg",
    age: 21,
    gender: "男",
    score: 79,
  },
];

let students: any[] = [];
for (let i = 0; i < 20; i++) {
  students = students.concat(_students);
}
students = JSON.parse(JSON.stringify(students));
students.forEach((item, i) => {
  item.id = i + 1;
  item.name += parseInt(i / 10 + "");
});

const formatters = {
  name: (key: string, item: any) => <a href={`/${item.id}`}>{item[key]}</a>,
  avatar: (key: string, item: any) => (
    <a href={`/${item.id}`}>
      <img style={{ width: 40 }} src={`${item[key]}`} alt="" />
    </a>
  ),
};

const pageSize = 10;

function PaginatorDemo() {
  const componentRef = useRef(null);

>>>>>>> dev-rollup
  return (
    <div>
      <h3>PaginatorDemo</h3>

<<<<<<< HEAD
      <StoPaginator
        totalPages={20}
        currentPage={3}
        onPageChange={(n: number) => console.log("onPageChange", n)}
      ></StoPaginator>
      
    </div>
  );
}
=======
      <StoTable
        ref={componentRef}
        arr={students}
        width={1000}
        formatters={formatters}
        sortables={Object.keys(students[0])}
        pageSize={pageSize}
      ></StoTable>

      <StoPaginator
        totalPages={Math.ceil(students.length / pageSize)}
        currentPage={1}
        onPageSelected={(page) => {
          console.log(page, "selected");
          (componentRef.current as any).turnToPage(page);
        }}
      ></StoPaginator>
    </div>
  );
}

export default PaginatorDemo;
>>>>>>> dev-rollup
